<template>
    <el-header>
        <div>
            后台管理系统
        </div>
        <div>
            <span style="line-height: 40px;">欢迎:{{ username }}</span>
            <el-dropdown>
                <span class="el-dropdown-link">
                    <!-- <el-avatar :size="40" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" /> -->
                    <el-avatar :size="40" :src="avatar" />
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>{{ roleName }}</el-dropdown-item>
                        <el-dropdown-item @click="handleExit">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </el-header>
</template>

<script setup>
import { useRouterStore } from '../../store/useRouterStore';
import { useUserStore } from '../../store/useUserStore';
import { useRouter } from 'vue-router'
// vite 使用 new URL() 这种方式能获取到本地静态资源
const avatar = new URL('../../assets/avatar.png', import.meta.url).href
const { changeUser, user: { role: { roleName }, username } } = useUserStore()
// user: { role: { roleName }, username }
const { changeRouter } = useRouterStore()
let user = useUserStore()
// console.log(roleName)
// console.log(username)
// console.log(user.user.role.roleName)
const router = useRouter()

const handleExit = () => {
    // 退出登录
    // 清空用户信息
    changeUser({})
    // 
    changeRouter(false)
    router.push('/login')
}

</script>


<style lang="scss" scoped>
.el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: #409EFF;
    color: #fff;
}
</style>